<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>[|.pageTitle|]</title>
    [|if .zTree|]
    <link rel="stylesheet" href="/static/zTree3/css/demo.css?t=5" type="text/css">
    <link rel="stylesheet" href="/static/zTree3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    [|end|]
    <meta charset="utf-8">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/main.css">
    <script src="/static/layui/layui.js?s=36"></script>
    <script src="/static/js/main.js?s=2124"></script>
    <script src="/static/js/echarts.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin" style="margin-top: 20px;">
    <form class="layui-form"  style="text-align: right;padding-right:40px;">
        <div class="layui-inline  layui-form-item">
           
            <label class="layui-form-label" style="display:inline-block;width:100px;">房间信息：</label>
            <div class="layui-input-inline" style="text-align: left;">
                <select name="roomslist" id = "roomslist" lay-verify="required" lay-search="">
                </select>
            </div>
         
      
            <label class="layui-form-label"  style="display:inline-block;">时间：</label>
            <div class="layui-input-inline"  style="width:100px;">
                <input type="text" class="layui-input" id="befordatetime" placeholder="yyyy-MM-dd" lay-verify="required"  readonly>
            </div>
            <div class="layui-input-inline" style="width:60px;">
                <select name="beforhours" id = "beforhours" lay-verify="required" >
                    
                </select>
            </div>
            <div class="layui-form-mid">时-</div>
            <div class="layui-input-inline"  style="width:100px;">
                <input type="text" class="layui-input" id="afterdatetime" placeholder="yyyy-MM-dd" lay-verify="required" readonly>
            </div>
            <div class="layui-input-inline" style="width:60px;">
                <select name="afterhours" id = "afterhours" lay-verify="required" ></select>
            </div>
             <div class="layui-form-mid">时</div>
             <div class="layui-btn-group" >
                    <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="queryBtn">搜索</button>
            </div>
        </div>
        <div id="main" style="width:100%;height:400px;"></div>
    </form>
   
    <table  class="layui-table" id="booldChangetable" lay-size="sm" lay-filter="layfilterbooldctrltable"> </table> 
</div>
<script>
    var $;

    layui.config({
            base : "js/"
    }).use(['form','element','layer','jquery','laydate','table'], function(){
        var table = layui.table;
        var element = layui.element;
        var form = layui.form;
        var laydate = layui.laydate;
        $ = layui.jquery;
    //监听表格复选框选择
   // table.on('checkbox(demo)', function(obj){
    //   console.log(obj);
   // });
  //常规用法
    laydate.render({
        elem: '#befordatetime'
        ,format: 'yyyy-MM-dd'
        ,btns: ['now','confirm']
    });
    //时间选择器
    laydate.render({
         elem: '#afterdatetime'
        ,format: 'yyyy-MM-dd' 
        ,btns: ['now','confirm']
     });
    
   
    GetMyXiaLaLset();
    GetMyBeforHoursSelect();
    GetMyAfterHoursSelect();

    //方法级渲染
    form.render("select");
    //监听工具条
   
    form.on('submit(queryBtn)', function(data) {
         
        //GetMyTables(table)
        GetTableDats($,table);
        //layer.alert("添加血池值为0，请确认！", {
               //     title: '失败'
       // })
        return false;
    });



 
    
       

    return false;
}); 
function GetMyXiaLaLset(){
 
    var selObj = document.getElementById("roomslist");
    //var valObj = document.getElementById("val");
    //var texObj = document.getElementById("tex");
    // 关键是这几句
    var myData = [|.RoomList|]
    var curvalue = [|.curServerID|] 
    for ( var i = 0 ; i < myData.length;i ++)
    {
        var Option = document.createElement("option");
        Option.value = myData[i].ServerID;
        if(curvalue == myData[i].ServerID){
          //   layer.alert(JSON.stringify(curvalue), {
           //     title: '最终的提交信息'
           //}) 
             Option.selected="selected";
        }

        Option.text ="(" + myData[i].ServerID + ")"+ myData[i].RoomName;
        selObj.options.add(Option);
    }
}
function add_zero(temp)
{
    if(temp<10) return "0"+temp;
    else return temp;
}

function GetMyBeforHoursSelect(){
 
    var selObj = document.getElementById("beforhours");
    for ( var i = 0 ; i < 24;i ++)
    {
        var Option = document.createElement("option");
        Option.value = add_zero(i);
        //if( add_zero(i) == [|.befordatehour|])
       // {
           //  Option.selected="selected";
       // }
        Option.text = add_zero(i);
        selObj.options.add(Option);
    }
}

function GetMyAfterHoursSelect(){
 
    var date = new Date();

    var selObj = document.getElementById("afterhours");
    var strHour = date.getHours();
    for ( var i = 0 ; i < 24;i ++)
    {
        var Option = document.createElement("option");
        Option.value = add_zero(i)
       // if( add_zero(i) == [|.afterdatehour|])
       // {
        //     Option.selected="selected";
       // }
        Option.text = add_zero(i);
        selObj.options.add(Option);
    }
}
function GetTableDats(Send,thisTabble)
{

    var roomslistdata =  document.getElementById("roomslist");
    var befordateday = document.getElementById("befordatetime");
    var beforhoursdata =  document.getElementById("beforhours");
    var afterdateday = document.getElementById("afterdatetime");
    var afterhoursdata =  document.getElementById("afterhours");

    var befoeDataTime = befordateday.value +" "+ beforhoursdata.value +":00:00";
    var afterDataTime = afterdateday.value +" "+ afterhoursdata.value +":59:59";
    if(roomslistdata.value != null && befordateday.value  != null && beforhoursdata.value != null && afterdateday.value != null && afterhoursdata != null )
    {
            var jsData = {
                'room_ID': roomslistdata.value
                ,'befor_DataTime': befoeDataTime
                ,'after_DataTime':afterDataTime
            };
        Send.post('[|urlfor "SysRoomconfController.BloodChangeTable"|]', jsData, function (out) {
            if (out.code == 0) {
                //layer.msg(out.msg)
                GetMyTables(thisTabble,out.data)
                GetMyCharts(out.data,out.count)
            } else {
                layer.msg(out.msg)
            }
        }, "json");
    }
}
function GetMyTables(thisTabble,tableData){
 

    thisTabble.render({
        elem: '#booldChangetable'
        ,data:tableData
        ,cols: [[ //标题栏
            {field:'datetimes',title:'时间',width:200}
            ,{field:'RoomBloods',title:'剩余血池',width:300}
            ,{field:'RoomBloodBalance',title:'血池平衡值',width:400}
                ]] 
        ,skin: 'row' //表格风格
        //,even: true
        ,page: true //是否显示分页
        ,limits: [50,100,200]
        ,limit: 100//每页默认显示的数量
        ,width: 'full-10'
        ,rules: 'all'
        ,height: 'full-550'
    });
}
function GetMyCharts(tableData,icount)
{
        //layer.alert(JSON.stringify(tableData[0].RoomBloods), {
            //   title: '最终的提交信息'
     //  }) 
      //  return false;
     var BlooDGameData = new Array();
     var xAxisName = new Array();
     var BloodBlanceArray = new Array();
     var index = 0;
       // layer.alert(JSON.stringify(tableData.length), {
       //         title: '最终的提交信息'
      //  }) 
      //  return false;
      var datalenth = tableData.length
     for(var i = datalenth-1 ; i >= 0; i--)
     {
        BlooDGameData[index] =  tableData[i].RoomBloods;

        xAxisName[index] = tableData[i].datetimes;; 
   
        BloodBlanceArray[index] = tableData[i].RoomBloodBalance;
        index ++;
     }
     var tmpText = "数据量：" + datalenth +"/" + icount;
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 使用刚指定的配置项和数据显示图表。
    option = {
        title: {
            text: '房间血池变化',
            subtext: tmpText,
            //type:'midle'
        },
        tooltip: {
            trigger: 'axis'
            //,formatter: '{a0}:{c0}'+myForMat + '<br />' + '{a1}:{c1}'+myForMat 
        },
        legend: {
            data:['血池','血池平衡值']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                //dataView: {readOnly: false},
                //magicType: {type: ['line', 'bar']},
                restore: {},
                //saveAsImage: {}
            }
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: xAxisName,
            axisLabel:{
              rotate:45, //刻度旋转45度角
              textStyle:{
                 //color:"red",
                 fontSize:14
                },
                formatter: function(value){
                    var str = value;
                    var datelenth = str.length
                    if(datelenth > 14)
                    {
                        return str.substring(11, datelenth-3);
                    }
                    return value
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                textStyle:{
                 //color:"red",
                 fontSize:14
                },
                formatter: function(value){
                    if(value > 1000 || value < -1000)
                    {
                        return value/1000 +"K"
                    }
                    return value
                }
            }
        },
        series: [
            {
                name:'血池',
                type:'line',
                itemStyle:{  
                    normal : {  
                          //lineStyle:{  
                             color:'#4682B4'  
                        //}  
                   }  
                },  
                data:BlooDGameData,
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ],
                    itemStyle:{  
                        normal : {  
                              //lineStyle:{  
                                 color:'#00CD00'  
                            //}  
                       } 
                    }
                }
            }
            ,{
                name:'血池平衡值',
                type:'line',
                itemStyle:{  
                    normal : {  
                          //lineStyle:{  
                             color:'#333333'  
                        //}  
                   }  
                },
                data:BloodBlanceArray,
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ],
                    itemStyle:{  
                        normal : {  
                              //lineStyle:{  
                                 color:'#9ACD32'  
                            //}  
                         } 
                    }
                }
            }
        ]
    };
    // 设置参数
    myChart.setOption(option);
};

</script>
</body>
</html>